

<template>
  <div>

    <div style="margin-top: 1px">
      <el-input
        placeholder="请输入：公司名称/客户经理/状态条件查询（支持模糊查询）"
        v-model="input"
        class="input-with-select"
      >
        <el-select v-model="select" slot="prepend" placeholder="请选择条件" id='selLost' style="width: 130px">
          <el-option label="流失预警" value="0"></el-option>
          <el-option label="暂缓流失" value="1"></el-option>
          <el-option label="确认流失" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="selectByCnameOrStatus"></el-button>
       <el-button slot="append" icon="el-icon-refresh-right" @click="clean"></el-button>
      </el-input>
    </div>


<!-- 表格   页面展示的  -->
    <el-table
      :data="pageInfo.list"
      style="width: 100%"
     
    >
      <!--  @selection-change="handleSelectionChange"
        <el-table-column type="selection" width="55"> </el-table-column> -->

      <el-table-column prop="lost_id" label="编号" width="120">
      </el-table-column>
      <el-table-column prop="company.com_name" label="客户" width="120">
      </el-table-column>
      <el-table-column prop="users.user_name" label="客户经理" width="120">
      </el-table-column>
      <el-table-column prop="lost_lasttime" label="上次下单时间" width="160">
      </el-table-column>
      <el-table-column prop="lost_date" label="确认流失时间" width="160">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <div slot-scope="scope">
          <span v-if="scope.row.lost_status == 0"> 流失预警 </span>
          <span v-else-if="scope.row.lost_status == 1"> 暂缓流失 </span>
          <span v-else> 确认流失 </span>
        </div>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope1">
          <el-button size="mini" type="success" v-if="scope1.row.lost_status!=2" @click="lostDefer(scope1.row)" >暂缓流失</el-button>
          <el-button size="mini" type="info" v-if="scope1.row.lost_status==2" @click="lostConfirm(scope1.row)">查看详情</el-button>
          <el-button size="mini" :plain="true" type="danger" v-if="scope1.row.lost_status==1" @click="lostConfirm(scope1.row)">确认流失</el-button>
        </template>
      </el-table-column>
    </el-table>
<!-- 表格   页面展示的  -->



<!-- 分页   页面展示的  -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
<!-- 分页   页面展示的  -->
  </div>
</template>






<script>
export default {
  data() {
    return {
      // visible: false,
      pageInfo: {},
      //  visible: true
      multipleSelection: [], 
       currentPage: 1,
      pageSize: 4,
      input:'',
      select:'',
       hidden1:true
    }
   
  },
  methods: {
    loadData() {
      this.$axios
        .get("/selectAllLost", {
          params: {
           pagenow1: this.currentPage,
            pagesize: this.pageSize,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
        })
        .catch((error) => {});
    },
selectByCnameOrStatus(){

 this.$axios
        .get("/selectByCnameOrStatus", {
          params: {
            pagenow1: this.currentPage,
            pagesize: this.pageSize,
            lost_status:this.select,
             com_name:this.input,
            user_name:this.input
           
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
        })
        .catch((error) => {});

},

    filterTag(value, row) {
      return row.lost_status === value;
    },


    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
        //val:当前页
      handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.selectByCnameOrStatus();
    },
    
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectByCnameOrStatus();
    },


    lostConfirm(val) {
        // if (val.lost_status == 1) {
             sessionStorage.setItem("lost_id", val.lost_id)
            this.$router.push("/ConfirmLost");
          // } else{
          // this.$message({
          // showClose: true,
    //       // message: '错了哦，确认流失前要先暂缓处理',
    //       // type: 'error' 
    //        });  
    // }
     },
    lostDefer(val) {
    sessionStorage.setItem("lost_id", val.lost_id)
    this.$router.push("/DeferLost");
    },

     clean(){
       this.select='';
       this.input='';
      this.loadData();
    } 
  },

  mounted() {
    //在当前页面加载完毕后就去要数据
    this.loadData();
  },
};
</script>
<style scope>
.el-table .warning-row {
  background: rgb(209, 104, 63);
}

/* .el-table .success-row {
  background: #f0f9eb;
} */

#selLost .el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: rgb(247, 251, 252);
}

</style>